<template>
    <!-- 用户管理 -->
    <div class="user-manage">
        <div class="user-main">
            <div class="search-container">
                <el-form
                    ref="ruleFormRef"
                    :model="queryParams.entity"
                    label-width="80"
                    inline
                >
                    <el-form-item label="用户名" prop="userName">
                        <el-input
                            v-model="queryParams.entity.userName"
                            maxlength="60"
                            placeholder="请输入用户名关键字"
                            clearable
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="部门名称" prop="deptId">
                        <el-tree-select
                            clearable
                            v-model="queryParams.entity.deptId"
                            :data="deptOptions"
                            filterable
                            :props="{
                                label: 'deptName',
                                value: 'deptId',
                                children: 'children'
                            }"
                            style="width: 200px"
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="Search"
                            @click="handleQuery"
                        >
                            搜索
                        </el-button>
                        <el-button icon="Refresh" @click="handleResetQuery">
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-card shadow="never" class="table-container">
                <!-- {{ queryParams }} -->
                <template #header>
                    <div
                        style="
                            display: flex;
                            justify-content: flex-start;
                            width: 100%;
                        "
                    >
                        <el-button
                            type="success"
                            icon="Plus"
                            @click="handleOpenUserDrawer({})"
                        >
                            新增
                        </el-button>
                    </div>
                </template>
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    highlight-current-row
                    border
                >
                    <el-table-column
                        v-for="(item, index) in columnData"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        min-width="120"
                        :width="item.width || ''"
                        :fixed="item.fixed || false"
                        show-overflow-tooltip
                        :resizable="false"
                    >
                        <template #default="{ row }">
                            <span v-if="item.prop === 'sex'">{{
                                row[item.prop] === '1'
                                    ? '男'
                                    : row[item.prop] === '2'
                                      ? '女'
                                      : '保密'
                            }}</span>
                            <span v-else-if="item.prop === 'enable'">{{
                                row[item.prop] === '1' ||
                                row[item.prop] === null
                                    ? '正常'
                                    : '禁用'
                            }}</span>
                            <span v-else>{{ row[item.prop] }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="200">
                        <template #default="scope">
                            <el-button
                                type="primary"
                                icon="Edit"
                                link
                                @click="handleOpenAuthorDrawer(scope.row)"
                            >
                                授权
                            </el-button>
                            <el-button
                                type="primary"
                                icon="Edit"
                                link
                                @click="handleOpenUserDrawer(scope.row)"
                            >
                                编辑
                            </el-button>
                            <el-button
                                type="danger"
                                icon="Delete"
                                link
                                @click="handleDelete(scope.row)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <Pagination
                    v-if="total > 0"
                    v-model:total="total"
                    v-model:page="queryParams.pageNo"
                    v-model:limit="queryParams.pageSize"
                    @pagination="handleQuery"
                />
            </el-card>
        </div>
        <UserDrawer
            :userParams="userParams"
            @close="handleCloseUserDrawer"
        ></UserDrawer>
        <!-- 授权 -->
        <Authorized
            :userParams="authorParams"
            @close="handleCloseAuthorDrawer"
        ></Authorized>
    </div>
</template>
<script setup>
defineOptions({ name: 'UserManage' })
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/Pagination.vue'
// import DeptTree from '@/components/DeptTree.vue'
import UserDrawer from './UserDrawer.vue'
// 授权
import Authorized from './authorized.vue'
import { getDeptTree } from '@views/deptManage/api/deptManage'
import { getUserList, deletetUser } from '@views/userManage/api/userManage'

const treeLoading = ref(false)
const tableLoading = ref(false)
const deptOptions = ref([])
const deptRootOptions = ref([])
const queryParams = reactive({
    entity: { deptId: '', userName: '' },
    pageNo: 1,
    pageSize: 15
})
const total = ref(0)
const columnData = ref([
    {
        label: '用户名',
        prop: 'userName',
        fixed: 'left'
    },
    {
        label: '职位',
        prop: 'position'
    },
    {
        label: '性别',
        prop: 'sex'
    },
    {
        label: '部门',
        prop: 'deptName'
    },
    {
        label: '手机号码',
        prop: 'phone',
        width: 160
    },
    {
        label: '邮箱',
        prop: 'email'
    },
    {
        label: '状态',
        prop: 'enable'
    },
    {
        label: '创建时间',
        prop: 'createDate',
        width: 180
    }
])
const tableData = ref([])
const ruleFormRef = ref(null)
const userParams = reactive({ visible: false })
const authorParams = reactive({ visible: false })

// 获取数据
const handleQuery = async () => {
    tableLoading.value = true
    const res = await getUserList(queryParams)
    tableLoading.value = false
    if (res?.code === 200) {
        tableData.value = res.data.records || []
        total.value = res.total || 0
    }
}

// 重置表单
const handleResetQuery = () => {
    ruleFormRef.value.resetFields()
    queryParams.pageNo = 1
    handleQuery()
}

// 打开人员弹窗
const handleOpenUserDrawer = (row) => {
    userParams.row = row
    userParams.deptOptions = deptOptions
    userParams.visible = true
}
// 关闭人员弹窗
const handleCloseUserDrawer = (type) => {
    userParams.visible = false
    if (type) handleQuery()
}
// 打开授权弹框
const handleOpenAuthorDrawer = (row) => {
    authorParams.row = row
    authorParams.deptOptions = deptOptions
    authorParams.visible = true
}
// 关闭授权弹窗
const handleCloseAuthorDrawer = (type) => {
    authorParams.visible = false
    if (type) handleQuery()
}
// 删除
const handleDelete = (row) => {
    ElMessageBox.confirm('确认删除的数据项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await deletetUser({ userId: row.userId })
            if (res?.code === 200) {
                ElMessage.success('删除成功')
                handleQuery()
            }
        })
        .catch(() => {})
}

// 获取部门树
const getDeptData = async () => {
    treeLoading.value = true
    const res = await getDeptTree({})
    treeLoading.value = false
    if (res?.code === 200) {
        deptOptions.value = res.data || []
        deptRootOptions.value = [
            { deptName: '全部', deptId: '', children: deptOptions.value }
        ]
    }
}
// 初始化
onMounted(() => {
    getDeptData()
    handleQuery()
})
</script>
<style lang="scss" scoped>
.user-manage {
    display: flex;
    height: 100%;

    .tree-main {
        width: 200px;
        background: #fff;
        padding: 10px;
    }

    .user-main {
        flex: 1;
        width: 0;
        margin-left: 10px;
    }
}
</style>
